<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TRÀ XANH KHÔNG ĐỘ</title>
<link rel="stylesheet" type="text/css" href="<?php echo __TEMPLATE_URL?>css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo __TEMPLATE_URL?>css/animate.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo __TEMPLATE_URL?>css/style.css" media="screen" />

<link href="favicon.png" rel="image_src" />
<link href="favicon.png" rel="icon" type="image/png" />

<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs-0.6.1.min.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/createjs-2013.05.14.min.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/tweenjs-0.4.1.min.js"></script>

<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/createjs/events/Event.js"></script>

<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/createjs/events/EventDispatcher.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/createjs/utils/IndexOf.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/geom/Rectangle.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/display/Container.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/display/MovieClip.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/display/Shadow.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/filters/BlurFilter.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easeljs/filters/AlphaMaskFilter.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/TweenMax.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/easing/EasePack.js"></script>

<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/txkd/water_data.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/common.js"></script>
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/functions.js"></script>



 <script>

	var stage,holder,bg,solidBg;
	var container,waterPath,waterHead;
	var bottle,cap,splash,bottleShadow;
	var waterMask
	var count=1;

	var elementAmount=80;

	var guide;

	var elementArray=[];
	var elementAbove,elementBelow;

	var PAGE_HEIGHT=3663;

	var scrollPercent=0;
	var dy=0;

	var sectionHolder

	var waterStream;
	var waterStreamArray;

	window.addEventListener('resize', resize, false);

    function init() {
        stage = new createjs.Stage("canvas");
        stage.enableMouseOver(20);
		//createjs.Ticker.setFPS(60);

		createjs.Ticker.addListener(this);

		container=new createjs.MovieClip(null,0,false)
		stage.addChild(container);

		holder=new createjs.MovieClip(null,0,false)
		container.addChild(holder);

		//BACKGROUND

		bg= new createjs.MovieClip();
		container.addChildAt(bg,0);

		bg.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/background.jpg")
		bg.addChild(bg.bitmap);

		//bubble= new createjs.MovieClip();
		//container.addChildAt(bubble,1);

		//bubble.bitmap=new createjs.Bitmap("images/home/bubble.png")
		//bubble.addChild(bubble.bitmap);



		guide= new createjs.MovieClip();
		container.addChildAt(guide,1);

		guide.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/guide.jpg")
		guide.addChild(guide.bitmap);

		guide.visible=false;

		//WATER PATH

		waterPath=new createjs.MovieClip();
		holder.addChild(waterPath);
		waterPath.x=54;
		waterPath.y=80;



		waterPath.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/water.png")
		waterPath.addChild(waterPath.bitmap);

		waterHead=new createjs.MovieClip();
		waterPath.addChild(waterHead);

		waterHead.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/water_head.png")
		waterHead.addChild(waterHead.bitmap);
		waterHead.bitmap.x=-80
		waterHead.bitmap.y=-155;
		waterHead.visible=false;

		waterMask=new createjs.Shape();
		waterPath.addChild(waterMask);


		waterMask.graphics.setStrokeStyle(200).beginStroke("#F00");
		waterMask.graphics.moveTo(waterData[0][0],waterData[0][1]);


		waterPath.bitmap.filters=[new createjs.AlphaMaskFilter(waterMask.cacheCanvas)]

		waterMask.visible=false;
		waterPath.bitmap.visible=false;


		//BOTTLE

		bottle=new createjs.MovieClip();
		waterPath.addChild(bottle)
		bottle.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/bottle.png")
		bottle.addChild(bottle.bitmap);

		bottle.x=500;
		bottle.y=200;

		cap=new createjs.MovieClip();
		bottle.addChild(cap);

		cap.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/cap.png")
		cap.addChild(cap.bitmap);

		cap.bitmap.x=-100;
		cap.x=126;


		splash=new createjs.MovieClip();
		bottle.addChildAt(splash,0);

		splash.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/water_splash.png")
		splash.addChild(splash.bitmap);

		splash.bitmap.x=-130;
		splash.bitmap.y=-190;
		splash.x=50

		splash.scaleX=splash.scaleY=0;


		bottleShadow=new createjs.MovieClip();
		bottle.addChildAt(bottleShadow,0);


		bottleShadow.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/bottle_shadow.png")
		bottleShadow.addChild(bottleShadow.bitmap);


		bottleShadow.x=-22;
		bottleShadow.y=350;

		createElements();
		setupScroll();
		// createSections()

		resize();

		beginWater();


		//$("#scroll_div").css("position","fixed")
		setTimeout(function(){
			trace("!")
			//$("#scroll_div").css("position","absolute")
			//$("#scroll_div").css("position","fixed")
		},1000)








		waterStream=new createjs.MovieClip();
		waterPath.addChildAt(waterStream,2);


		waterStreamArray=[];

		var colorArray=["#83cade","#fefeff","#bbe1f2","#9bd6e5","#85cadc"];
		var blurFilter = new createjs.BlurFilter(5, 5, 1);
		for(var i=0;i<1000;i++){
			var item=new createjs.Shape();


			var randomPosX=30*(Math.random()-Math.random())
			var randomPosY=30*(Math.random()-Math.random())

			var randomScale=.1+3*Math.random();

			var color=colorArray[Math.floor(Math.random()*colorArray.length)]

			item.graphics.beginFill(color);
			item.graphics.drawCircle(randomPosX,randomPosY,randomScale);
			
			item.scaleY=1//+2*Math.random();
			item.scaleX=1;
			//item.alpha=Math.random()
			item.speed=1+3*Math.random();
			item.pos=800*Math.random();
			waterStream.addChild(item);

			waterStreamArray.push(item);

			//BLUR
			
 			item.filters = [blurFilter];
 			var bounds = blurFilter.getBounds();

 			item.cache(-10+bounds.x, -10+bounds.y, 10+bounds.width, 10+bounds.height);



		}



		createjs.Ticker.addListener(waterStream);
		waterStream.tick=function(){
			for(var i=0;i<1000;i++){
				var item=waterStreamArray[i];

				item.pos+=item.speed;
				if (item.pos>995)item.pos=0;

				var pos=Math.round(item.pos);

				var x=waterData[pos][0]
				var y=waterData[pos][1]
				var r=waterData[pos][2]
				item.x=x
				item.y=y
				item.rotation++;

				/*item.alpha-=0.1;
				

				if (Math.random()<.1){
					item.alpha=Math.random();
				}

				if (item.alpha<0){
					item.alpha=0;

				}
				if (item.alpha>1){
					item.alpha=1;
				}
				*/


			}

		}









	}

    function tick() {
		stage.update();



    }

	function beginWater(){

		TweenMax.to(splash,1,{scaleX:1,scaleY:1,ease:Quint.easeOut})
		TweenMax.to(cap,1.2,{rotation:130,x:"100",y:"-30",ease:Quint.easeOut})
		TweenMax.to(this,6.5,{count:998,delay:.1,ease:Sine.easeInOut,onUpdate:function(){
			waterHead.visible=true;
			waterPath.bitmap.visible=true;

			var t=Math.floor(count);
			if (t>999)t=999;
			var x=waterData[t][0]
			var y=waterData[t][1]
			var r=waterData[t][2]

			waterMask.graphics.lineTo(x,y);
			waterMask.cache(0,0,1000,PAGE_HEIGHT)
			waterPath.bitmap.filters=[new createjs.AlphaMaskFilter(waterMask.cacheCanvas)]
			waterPath.bitmap.cache(0,0,1000,PAGE_HEIGHT);

			waterHead.x=x;
			waterHead.y=y;
			waterHead.rotation=r;

			stage.update();
		}})

		for(i=0;i<elementAmount;i++){
			var item=elementArray[i];
			var temp=item.startPos;
			item.startPos=0;
			item.scaleX=item.scaleY=0;

			TweenMax.to(item,4,{scaleX:1,scaleY:1,startPos:temp,onUpdate:onElementUpdate,delay:.5+Math.random(),onComplete:startElement})
		}




	}

	function createElements(){
		var type=0;

		elementAbove=new createjs.MovieClip();
		elementBelow=new createjs.MovieClip();

		waterPath.addChildAt(elementBelow,0)
		waterPath.addChild(elementAbove)


		for(var i=0;i<elementAmount;i++){
			var item=new createjs.MovieClip();
			elementAbove.addChild(item)

			elementArray.push(item)

			type=1+i%8;

			item.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/elements/"+type+".png")
			item.addChild(item.bitmap)

			item.pos=0;
			item.dPos=0;
			item.speed=1//+3*Math.random();
			item.maxSpeed=1+3*Math.random();

			item.startPos=997*Math.random();
			item.pos=0;

			item.rPos=item.startRPos=2*Math.PI*Math.random()
			item.rSpeed=.05//+.15*Math.random()
			item.maxRSpeed=.05


			item.waveLength=50+100*Math.random();

			item.bitmap.rotation=360*Math.random();





		}
		//elementAbove.visible=false;
		//elementBelow.visible=false;

	}

	function startElement(){
		createjs.Ticker.addListener(waterPath);
		waterPath.tick=onElementUpdate;
		elementAbove.visible=true;
		elementBelow.visible=true;
	}

	function onElementUpdate(){
		for(var i=0;i<elementAmount;i++){
			var item=elementArray[i];

			var dPos=(item.startPos+998*scrollPercent/3) %998



			if(Math.abs(dPos-item.pos)>800){
				item.pos=dPos;
			}


			item.pos+=(dPos-item.pos)/10

			var pos =Math.round(item.pos);


			var x=waterData[pos][0]-5
			var y=waterData[pos][1]-22
			var r=waterData[pos][2]

			//item.x+=(x-item.x)/10;
			//item.y+=(y-item.y)/10;
			//item.rotation+=(r-item.rotation)/10;
			item.x=x;
			item.y=y;
			item.rotation=r;

			var core=item.bitmap;

			var drPos=item.startRPos+10*Math.PI*scrollPercent;

			item.rPos+=(drPos-item.rPos)/10

			var rx=item.waveLength*Math.sin(item.rPos)
			var ry=50*Math.cos(item.rPos)

			var rScale=.5+(50+ry)/180

			core.x=rx
			core.y=ry
			core.scaleX=core.scaleY=rScale;


			if(core.scaleX<.7){
				elementBelow.addChild(item)
			}else{
				elementAbove.addChild(item)
			}


		}

	}

	/*function onElementUpdate(){
		for(var i=0;i<elementAmount;i++){
			var item=elementArray[i];

			if (Math.abs(container.y-dy)>1){
				//item.speed+=(item.maxSpeed-item.speed)/3
				//item.rSpeed+=(item.maxRSpeed-item.rSpeed)/3
				item.speed=item.maxSpeed;
				item.rSpeed=item.maxRSpeed;
			}else{
				//item.speed+=(0-item.speed)/3
				//item.rSpeed+=(0-item.rSpeed)/3
				item.speed=0
				item.rSpeed=0;
			}


			item.pos+=item.speed;
			item.rPos+=item.rSpeed;



			if (item.pos>999){
				item.pos=0;
				item.x=waterData[0][0]
				item.y=waterData[0][1]



			}

			var pos=Math.floor(item.pos)

			var x=waterData[pos][0]-5
			var y=waterData[pos][1]-22
			var r=waterData[pos][2]

			item.x+=(x-item.x)/10;
			item.y+=(y-item.y)/10;
			item.rotation=r;


			var core=item.bitmap;


			core.x=100*Math.sin(item.rPos)
			core.y=50*Math.cos(item.rPos)

			core.scaleX=core.scaleY=.3+(50+core.y)/100

			if(core.scaleX<.5){
				elementBelow.addChild(item)
			}else{
				elementAbove.addChild(item)
			}






		}

	}*/


	function setupScroll(){

		$(window).scroll(function(){
			//trace($(this).top());
			//trace($(document).scrollTop());
			var sh=window.innerHeight
			var h=$(document).height()

			scrollPercent=$(document).scrollTop()/(h-sh);

			dy=-scrollPercent*(PAGE_HEIGHT-sh)



		})

		createjs.Ticker.addListener(container);
		container.tick=function(){

			container.y+=(dy-container.y)/3;
			$('.Home').css({ top: container.y });


			//container.y=dy;
		}

	}

    function resize() {

		sw=window.innerWidth;
		sh=window.innerHeight//-(56+40);

		stage.canvas.width = sw;
        stage.canvas.height = sh;

		var scale=sw/1240;

		holder.x=(sw-1240)/2
		guide.x=holder.x;

		bg.scaleX=scale;



		stage.update();
    }


	function createSections(){
		var sectionArray=["news","campaign","video","promotion","contact"];
		var posArray=[	{x:144,y:838},
						{x:475,y:1258},
						{x:143,y:1706},
						{x:484,y:2306},
						{x:140,y:2775}]

		sectionHolder=new createjs.MovieClip();
		holder.addChild(sectionHolder);


		for(var i in sectionArray){
			var item=new createjs.MovieClip();
			item.bitmap=new createjs.Bitmap("<?php echo __TEMPLATE_URL?>images/home/section_"+sectionArray[i]+".png")
			item.addChild(item.bitmap);

			sectionHolder.addChild(item);

			item.x=posArray[i].x;
			item.y=posArray[i].y;



		}



	}


	function trace(s){
		console.log(s)
	}

</script>



</head>

<body onLoad="init()">

	<?php echo $html_header_content; ?>

	<canvas id="canvas" width="100" height="100" backgroundColor="#a3e270" style="position:fixed"></canvas>

	<div id="pHome">
		<div class="home">
	    	<div class="home-product">
	    		<h2><img alt="Sản phẩm" src="<?php echo __TEMPLATE_URL?>images/title_sanpham.png"></h2>
	    		<div class="homeProduct">
	    			<div class="productA floating animated">
	    				<a href="<?php echo __SYSTEM_URL.'san-pham'; ?>"><img alt="" src="<?php echo __TEMPLATE_URL?>images/traxanh-khongdo.png" class="normal">
	    				<img alt="" src="<?php echo __TEMPLATE_URL?>images/traxanh-khongdo_hover.png" class="hover">
	    				</a>
	    				<p class="productName"><img alt="" src="<?php echo __TEMPLATE_URL?>images/home_product_a_name.png"></p>
	    			</div>
	    			<div class="productB floating_2 animated">
	    				<a href="<?php echo __SYSTEM_URL.'san-pham'; ?>"><img alt="" src="<?php echo __TEMPLATE_URL?>images/traxanh-lowcalorie.png" class="normal">
	    				<img alt="" src="<?php echo __TEMPLATE_URL?>images/traxanh-lowcalorie_hover.png" class="hover"></a>
	    				<p class="productName"><img alt="" src="<?php echo __TEMPLATE_URL?>images/home_product_b_name.png"></p>
	    			</div>
	    		</div>
	    	</div>

	    	<div class="home-news">
	    		<div class="photoFrame">
	    			<div class="placeholder"><img alt="" src="<?php echo __TEMPLATE_URL?>images/demo/home_news_photo.jpg"></div>
	    		</div>
	    		<h2><img alt="Tin tức" src="<?php echo __TEMPLATE_URL?>images/title_tintuc.png"></h2>
	    		<h3><a href="<?php echo __SYSTEM_URL.'tin-tuc/chi-tiet/'.$rowNews['id']?>"><?php echo h($rowNews['name']);?></a></h3>
	    		<?php echo $rowNews['intro']; ?>
	    		<a href="<?php echo __SYSTEM_URL.'tin-tuc/chi-tiet/'.$rowNews['id']?>" class="viewDetail">Xem chi tiết &raquo;</a>
	    	</div>

	    	<div class="home-campain">
	    		<h2><img alt="Chiến dịch" src="<?php echo __TEMPLATE_URL?>images/title_chiendich.png"></h2>
	    		<a href="<?php echo __SYSTEM_URL.'chien-dich/'.$rowCamp['id']?>"><img alt="" src="<?php echo __UPLOAD_URL.$rowCamp['image']; ?>"></a>
	    		<a href="<?php echo __SYSTEM_URL.'chien-dich/'.$rowCamp['id']?>" class="viewDetail">Xem chi tiết &raquo;</a>
	    	</div>

	    	<div class="home-video">
	    		<h2><img alt="Video" src="<?php echo __TEMPLATE_URL?>images/title_video.png"></h2>
	    		<div class="tv">
	    			<div class="tvFrame"></div>
	    			<div class="placeholder">
	    				<img alt="" src="<?php echo __TEMPLATE_URL?>images/demo/home_tv_screen.png">
	    				<span href="#"></span>
	    			</div>
	    			<a href="<?php echo __SYSTEM_URL.'video'; ?>"></a>
	    		</div>
	    	</div>

	    	<div class="home-promotion">
	    		<div class="photoFrame">
	    			<div class="placeholder"><img alt="" src="<?php echo __TEMPLATE_URL?>images/demo/home_promo_thumb.jpg"></div>
	    		</div>
	    		<div class="copy">
		    		<h2><img alt="Khuyễn mãi" src="<?php echo __TEMPLATE_URL?>images/title_khuyenmai.png"></h2>
		    		<p>Cập nhật những tin tức và thông tin mới nhất về sản phẩm TXKD</p>
		    		<a href="<?php echo __SYSTEM_URL.'khuyen-mai/chi-tiet/'.$rowPromo['id']?>" class="viewDetail">Xem chi tiết &raquo;</a>
		    	</div>
	    	</div>


	    	<div class="home-contact">
	    		<h2><img alt="Liên hệ" src="<?php echo __TEMPLATE_URL?>images/title_lienhe.png"></h2>
	    		<div class="contact">
					<h2>Thông tin liên lạc</h2>
					<address>
						<p><strong>Địa chỉ:</strong> 219 đại lộ Bình Dương, Phường Vĩnh Phú, thị xã Thuận An, Tỉnh Bình Dương.</p>
						<p><strong>Điện Thoại:</strong> (0650) 3755161</p>
						<p><strong>Email:</strong> <a href="mailto:info@thp.com.vn">info@thp.com.vn</a></p>
					</address>
					<form name="contactform" id="contactform" method="post" action="<?php echo __SYSTEM_URL ?>lien-he">
					<ul>
						<li>
							<input placeholder="Họ tên" id="txtName" name="txtName" class="txf txf_s l">
							<input placeholder="Email" id="txtEmail" name="txtEmail" class="txf txf_s r">
						</li>
						<li>
							<input placeholder="Tiêu đề" id="txtTitle" name="txtTitle" class="txf">
						</li>
						<li>
							<textarea id="txtMessage" name="txtMessage" class="txaEmpty">Nội dung</textarea>
						</li>
						<li align="center">
							<input type="button" id="btn_send_contact" name="btn_send_contact" class="btn" value="">
						</li>
					</ul>
					</form>
					<p class="fb_fanpage"><a href="#"><img alt="" class="" src="<?php echo __TEMPLATE_URL?>images/fb_fanpage.png"></a></p>
				</div>

				<a href="https://www.facebook.com/traxanhkhongdo.txkd" target="_blank"><img alt="Tham gia Fanpage Trà Xanh Không Độ" src="<?php echo __TEMPLATE_URL?>images/fb_fanpage.png" class="joinFb"></a>
	    	</div>

	    </div>
	</div>

    <div id="scroll_div" style="height:3663px">
    </div>

	<div class="loading"><div>

<link rel="stylesheet" href="<?php echo __TEMPLATE_URL?>css/plugin.css" />
<script type="text/javascript" src="<?php echo __TEMPLATE_URL?>js/jAlerts.js"></script>


<script type="text/javascript">

jQuery(document).ready(function ($) {

	$("#btn_send_contact").bind("click", function(e){

		var strMsg = "";
		var error = 0;
		var re = /^([\w.]+)$/;

		if ($("#txtName").val() == '' || $("#txtName").val().toUpperCase() == "NAME") {
			strMsg += '<p>Vui lòng nhập tên liên hệ.</p>';
			error = error + 1;
		}
		if ($("#txtEmail").val() == '' || $("#txtEmail").val().toUpperCase() == "EMAIL") {
			strMsg += '<p>Vui lòng nhập địa chỉ email.</p>';
			error = error + 1;
		}
		else if (!isEmail($("#txtEmail").val())) {
			strMsg += '<p>Địa chỉ email không hợp lệ.</p>';
			error = error + 1;
		}
		if ($("#txtTitle").val() == '') {
			strMsg += '<p>Vui lòng nhập tiêu đề.</p>';
			error = error + 1;
		}
		if ($("#txtMessage").val() == '' || $("#txtMessage").val().toUpperCase() == "MESSAGE") {
			strMsg += '<p>Vui lòng nhập nội dung.</p>';
			error = error + 1;
		}if (strMsg != "") {
			//util.common.hideLoading();
			$('.loading').hide();
			strMsg = error > 1 ? '<div class="multi-msg">' + strMsg + '</div>' : strMsg;
			jAlert(strMsg, '', function () {  });
			return false;
		}else{
			//util.common.showLoading();
			$('.loading').show();
			 var param = $("#contactform").serializeArray();
			 $.post($("#contactform").attr("action") , param, function(response){
				jAlert(response.message);
				$('#contactform')[0].reset();
				//util.common.hideLoading();
				$('.loading').hide();
			}, "json");

		}
		return false;
	});

});

</script>

</body>
</html>


